<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本格式化属性(10个属性)</title>
		<!-- 文本格式化属性(4种方式,10个属性) 
		1.控制字体:font-family,font-size,font-weight
		2.控制文本布局【对齐,间隙】：text-algin,line-height
		letter-spacing word-spacing
		3.文本修饰效果:text-decoration
		4.处理文本效果:
		
		-->
	
	    <style>
			/* 知识点css3语法：选择器{
				属性：属性值；
				属性：属性值；
			    } 
				叫法：一个样式
				id选择器语法：html元素加id="别名"
				             css中加#别名选中
				提醒：加权			 
				*/
			div#bb{
			color: aqua;
			/* 知识点1：文本格式化属性-->1.针对控制字体 
			  font-family字体家族：微软雅黑：ans-serif黑体
			  问题：可以设置多个字体，浏览器会按照顺序找字体
			  兼容考虑；用户电脑字体缺失,对应找可以使用字体！		*/
			font-family: 微软雅黑,sans-serif;
			/* 知识点2：文本格式化属性-->2.针对控制字体 
			font-size字体尺寸：px/em
			px---pc端---像素,特点：绝对值
			em移动端---特点：相对于父元素字体大小，倍数形式放大 
			*/
		    font-size: 1em;
		    /* 知识点3：文本格式化属性-->3.针对控制字体 
		    font-weight字体粗细  100,200,300...900
		    用法：全局字体，统配选择器中使用,400和700
			400正常粗细 对应 normal正常
			                bold  相对父元素加粗
							light 相对父元素变细
			*/
		    font-weight: light;
			}   
		div h1.b1{
			
			/* 派生选择器{后代选择器} */
			/* 知识点4：文本格式化属性--针对控制文本格式 */
			text-align: justify;
			/* 两端对齐：字体空间长,使用位置:弹性布局*/
			color: #4bff2c;
		}
		div span{
			border: 1px solid red;
			height: 50px;
			/* 行转块 */
			display: block;
			/* 知识点5.文本格式化属性--文本对齐方式[垂直] 
			line-height行高属性
			使用方式：一定跟高度一起出现【垂直】
			*/
		   line-height: 60px;
		   /* 知识点6：文本格式化属性--文本间隙[字符] */
		   letter-spacing: 2px;
		   /* 知识点7：文本格式化属性--文本间隙[单词] */
		   word-spacing: 10px;
		   /* 补充：1.所有的单词大写 2.所有的首字符大写 3.首行缩进200px*/
		   text-transform: uppercase;
		   text-transform: capitalize;
		   text-indent: 200px;;
		}
		
		a{
			/*知识点8:文本修饰效果,针对超链接  
			使用方法：与通配选择器一起使用
			none:去掉超链接的下划线
			underline：默认,下划线，切换
			line-through:删除线,被html5中s元素取代
			*/
			text-decoration: none;
			/* 知识点9：文本修饰效果,针对超链接和文本
			 text-shadow 文本阴影属性
			 属性值：x值 y值 blur，模糊距离 颜色
			 */
			test-shadow: 5px 5px 10px #f00;
		}	
		
		p{
			border: 1px solid red;
			/* 知识点10：white-space换行属性
			属性值不同效果不同
			nowrap 效果：不换行，作用:在一行显示,不超出范围
			使用特点：配合溢出一起使用
			pre   效果：保留空格和回车
			normal 默认  
			*/
		   wh te-space: nowrap;/* 不换行,就一行 */
		   over flow: hidden;/* 其他行省略 */
		   wh ite-space: pre;/* 保存原始文本空格和回车 */
		   white-space: normal;
		}
		</style>
	</head>
	<body>
		<h1 >处理文本效果[换行和溢出]</h1>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi adipisci excepturi dolore quisquam? Consequuntur animi aut possimus eius, nam amet at quae ab commodi, quis ducimus quidem sint aliquid aperiam! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur in, quae id similique deleniti at, nostrum soluta quis voluptatibus, iure explicabo facilis dolorum itaque. Iure soluta quidem odit quod distinctio!</p>
		
		
		
		
		
	    <h1>
	       <marquee>控制文本布局{对齐间隙}</marquee>
	    </h1>
		<!-- 需求：创建div，内嵌span元素，增加假文 
		     设置样式：添加1px实线边框，高度:25px
			          派生选择器找到span元素
		-->
   		<div>
			<span>Lorem ipsum dolor periam dos eaque cupidique magni odio!</span></div>
		<!-- 需求：创建a元素,超链接跳转到唐工官网 -->
		<div style="height: 80px;"></div>
		<h1>文本修饰效果</h1>
		<a href="http://www.tsgzy.edu.cn">跳转到唐工官网</a>
		
		
		
		<div id="bb">Lorem ipsu empti illo.</div>
	 <!-- 需求：外层div  内层h1,起俩别名，css任意别名字体设置颜色 
	 要求加权方式
	 -->
	 <div>
		 <h1 class="b1 b2">东北雨姐11111111111</h1>
	 </div>
	</body>
</html>